<template>
  <div class="user-center">
    <a-card title="用户中心" class="center-card">
      <a-descriptions title="个人信息" :column="1">
        <a-descriptions-item label="用户名">
          {{ loginUserStore.loginUser.userName }}
        </a-descriptions-item>
        <a-descriptions-item label="用户角色">
          {{ getRoleText(loginUserStore.loginUser.userRole) }}
        </a-descriptions-item>
        <a-descriptions-item label="用户头像">
          <a-avatar :src="loginUserStore.loginUser.userAvatar" :size="64" />
        </a-descriptions-item>
        <a-descriptions-item label="个人简介">
          {{ loginUserStore.loginUser.userProfile || '暂无个人简介' }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider />

      <a-space>
        <a-button type="primary">编辑个人信息</a-button>
        <a-button>修改密码</a-button>
      </a-space>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { useLoginUserStore } from '@/stores/loginUser'
import ACCESS_ENUM from '@/access/accessEnum'

const loginUserStore = useLoginUserStore()

const getRoleText = (role: string | undefined) => {
  switch (role) {
    case ACCESS_ENUM.ADMIN:
      return '管理员'
    case ACCESS_ENUM.USER:
      return '普通用户'
    case ACCESS_ENUM.NOT_LOGIN:
      return '未登录'
    default:
      return '未知角色'
  }
}
</script>

<style scoped>
.user-center {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.center-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
